<template>
  <el-dialog title="新增" :close-on-click-modal="false" :visible.sync="visible" width="800px">
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="140px">
      <el-form-item label="直播间标题" prop="name">
        <el-input v-model="form.name" style="width: 370px;" :disabled="isDisabled"  />
        <p style="color: #cf0f0f">直播间名字，最短3个汉字，最长17个汉字</p>
      </el-form-item>
      <el-form-item label="直播间背景图" prop="cover_imge">
        <Imglist :tip="tip" @updataImg="updataImgCover" :limit="1" :value="cover_imge_array" :dialogVisible="visible" :zi='true'></Imglist>
        <p style="color: #cf0f0f">直播间背景图 ，建议像素1080*1920，大小不超过2M</p>
      </el-form-item>
      <el-form-item label="直播间分享图片" prop="share_imge">
        <Imglist :tip="tip" @updataImg="updataImgShare" :limit="1" :value="share_imge_array" :dialogVisible="visible" :zi='true'></Imglist>
        <p style="color: #cf0f0f">直播间分享图 ，建议像素800*640，大小不超过1M</p>
      </el-form-item>
      <el-form-item label="封面图" prop="feeds_imge">
        <Imglist :tip="tip" @updataImg="updataImgFeeds" :limit="1" :value="feeds_imge_array" :dialogVisible="visible" :zi='true'></Imglist>
        <p style="color: #cf0f0f">购物直播封面图 ，建议尺寸800*800</p>
      </el-form-item>
      <el-form-item label="计划直播开始时间" prop="start_time">
        <el-date-picker v-model="form.start_time" type="datetime" style="width: 370px;" :disabled="isDisabled"
                        value-format="yyyy-MM-dd HH:mm:ss"/>
        <p style="color: #cf0f0f">开播时间需要在当前时间的10分钟后,并且开始时间不能在6个月后</p>
      </el-form-item>
      <el-form-item label="计划直播结束时间" prop="end_time">
        <el-date-picker v-model="form.end_time" type="datetime" style="width: 370px;" :disabled="isDisabled" value-format="yyyy-MM-dd HH:mm:ss" />
        <p style="color: #cf0f0f">开播时间和结束时间间隔不得短于30分钟,不得超过24小时</p>
      </el-form-item>
      <el-form-item label="主播昵称" prop="anchor_name" :disabled="isDisabled">
        <el-input v-model="form.anchor_name" style="width: 370px;" :disabled="isDisabled"/>
        <p style="color: #cf0f0f">主播昵称，最短2个汉字，最长15个汉字</p>
      </el-form-item>
      <el-form-item label="主播微信号" prop="anchor_wechat" :disabled="isDisabled">
        <el-input v-model="form.anchor_wechat" style="width: 370px;" :disabled="isDisabled"/>
        <p style="color: #cf0f0f">主播微信号需要实名，搜索微信官方小程序【小程序直播】进行认证</p>
      </el-form-item>
      <el-form-item label="主播头像" prop="anchor_imge">
        <Imglist :tip="tip" @updataImg="updataImgAnchor" :limit="1" :value="anchor_imge_array" :dialogVisible="visible" :zi='true'></Imglist>
      </el-form-item>

      <el-form-item label="直播间类型" prop="type">
        <el-radio-group v-model="form.type" :disabled="isDisabled">
          <el-radio :label="1" class="radio">推流</el-radio>
          <el-radio :label="0">手机直播</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="横屏、竖屏" prop="screen_type">
        <el-radio-group v-model="form.screen_type" :disabled="isDisabled">
          <el-radio :label="1" class="radio">横屏</el-radio>
          <el-radio :label="0">竖屏</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否关闭点赞" prop="close_like">
        <el-radio-group v-model="form.close_like" :disabled="isDisabled">
          <el-radio :label="1" class="radio">关闭</el-radio>
          <el-radio :label="0">开启</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否关闭货架" prop="close_goods">
        <el-radio-group v-model="form.close_goods" :disabled="isDisabled">
          <el-radio :label="1" class="radio">关闭</el-radio>
          <el-radio :label="0">开启</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否关闭评论" prop="close_comment">
        <el-radio-group v-model="form.close_comment" :disabled="isDisabled">
          <el-radio :label="1" class="radio">关闭</el-radio>
          <el-radio :label="0">开启</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="是否关闭回放" prop="close_replay">
        <el-radio-group v-model="form.close_replay" :disabled="isDisabled">
          <el-radio :label="1" class="radio">关闭</el-radio>
          <el-radio :label="0">开启</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否关闭分享" prop="close_share">
        <el-radio-group v-model="form.close_share" :disabled="isDisabled">
          <el-radio :label="1" class="radio">关闭</el-radio>
          <el-radio :label="0">开启</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否关闭客服" prop="closeKf">
        <el-radio-group v-model="form.close_kf" :disabled="isDisabled">
          <el-radio :label="1" class="radio">关闭</el-radio>
          <el-radio :label="0">开启</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="handleCancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="handleCloseOrder" :disabled="isDisabled">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import wechatLiveApi from '@/api/wechatLive.js'
  import Imglist from './../../oss/oss-uploadImg'

  export default {
    components: {
      Imglist
    },
    data () {
      return {
        loading: false,
        crud: {},
        form: {
          type: 0,
          screen_type: 0,
          close_like: 0,
          close_goods: 0,
          close_comment: 0,
          close_replay: 0,
          close_share: 0,
          close_kf: 0
        },
        rules: {
          name: [
            { required: true, message: '直播间标题至少3个汉字', trigger: 'blur' }
          ],
          cover_imge: [
            { required: true, message: '背景图不能为空', trigger: 'blur' }
          ],
          share_imge: [
            { required: true, message: '分享图片不能为空', trigger: 'blur' }
          ],
          feeds_imge: [
            { required: true, message: '直播频道封面图不能为空', trigger: 'blur' }
          ],
          start_time: [
            { required: true, message: '开始时间不能为空', trigger: 'blur' }
          ],
          end_time: [
            { required: true, message: '预计结束时间不能为空', trigger: 'blur' }
          ],
          anchor_name: [
            { required: true, message: '主播昵称最短2个汉字', trigger: 'blur' }
          ],
          anchor_wechat: [
            { required: true, message: '主播微信号不能为空', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '直播间类型 1：推流 0：手机直播不能为空', trigger: 'blur' }
          ],
          screen_type: [
            { required: true, message: '横屏、竖屏 【1：横屏，0：竖屏】不能为空', trigger: 'blur' }
          ],
          close_like: [
            { required: true, message: '是否关闭货架 【0：开启，1：关闭】不能为空', trigger: 'blur' }
          ],
          close_comment: [
            { required: true, message: '是否关闭评论 【0：开启，1：关闭】不能为空', trigger: 'blur' }
          ]
        },
        isDisabled: false,
        visible: false,
        tip: '',
        cover_imge_array: [],
        share_imge_array: [],
        feeds_imge_array: [],
        anchor_imge_array: []
      }
    },

    methods: {
      handleCancel () {
        this.visible = false
      },
      open () {
        this.form = {
          type: 0,
          screen_type: 0,
          close_like: 0,
          close_goods: 0,
          close_comment: 0,
          close_replay: 0,
          close_share: 0,
          close_kf: 0
        }
        this.visible = true
      },
      // 上传图片时的回调
      updataImgCover (e) {
        this.form.cover_imge = e[0]
      },
      // 上传图片时的回调
      updataImgShare (e) {
        this.form.share_imge = e[0]
      },
      // 上传图片时的回调
      updataImgFeeds (e) {
        this.form.feeds_imge = e[0]
      },
      updataImgAnchor (e) {
        this.form.anchor_imge = e[0]
      },
      handleCloseOrder () {
        console.log(this.form)
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.loading = true
            wechatLiveApi.wechatLiveSave(this.form).then(res => {
              if (res && res.data.code === 200) {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.visible = false
                this.$emit('updataList', 1)
              }
            }).finally(() => {
              this.loading = false
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss">
</style>
